<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">商品</label>
        <div class="common-search-conrol">
          <input type="text" nz-input placeholder="请输入商品编号或名称" [(ngModel)]="queryForm.name" autocomplete="off"/>
        </div>
      </div>
        
      <div class="common-form-item">
        <label class="common-search-label">商品分类</label>
        <div class="common-search-conrol">
          <nz-tree-select
            nzDefaultExpandAll
            nzShowSearch
            nzCheckable
            nzCheckStrictly
            nzHideUnMatched
            nzPlaceHolder="请选择商品分类"
            nzVirtualHeight="400px"
            [nzMaxTagCount]="1"
            [nzNodes]="GoodsTypeList"
            [(ngModel)]="cacheData.goodsTypeIdList"
            (ngModelChange)="onChangeTree($event)"
          ></nz-tree-select>
        </div>
      </div>
        
      <div class="common-form-item">
        <label class="common-search-label">货主</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="cargoOwnerSlected"
            (nzScrollToBottom)="loadSupplierMore()"
            nzPlaceHolder="请选择货主"
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            [nzDropdownRender]="renderTemplate"
            (ngModelChange)="cargoOwnerChange($event)"
          >
            <nz-option *ngFor="let item of cargoOwnerOptions" [nzValue]="item.id" [nzLabel]="item.abbreviation"></nz-option>
          </nz-select>
          <ng-template #renderTemplate>
            <nz-spin *ngIf="isSelectLoading"></nz-spin>
          </ng-template>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">商品品牌</label>
        <div class="common-search-conrol">
          <nz-select
            [nzMaxTagCount]="1"
            nzAllowClear
            nzMode="multiple"
            nzPlaceHolder="请选择"
            [(ngModel)]="brandArrys"
            (ngModelChange)="brandSelected($event)"
          >
            <nz-option
              *ngFor="let item of cacheData.brandList"
              [nzLabel]="item.name"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.status">
            <nz-option nzLabel="全部" nzValue="-1"></nz-option>
            <nz-option nzLabel="无效" nzValue="0"></nz-option>
            <nz-option nzLabel="已上架" nzValue="1"></nz-option>
            <nz-option nzLabel="已下架" nzValue="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">创建日期</label>
        <div class="common-search-conrol">
          <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.nzFormat"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
          <button nz-button nzType="default" (click)="resetData()">重置</button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <div nz-space class="opera-btns">
    <button nz-button nzType="primary" [routerLink]="['../goodsTabs', 0]" *ngIf="permission.userPermission.has('goods:goodsAll:add')">新增商品</button>
    <button nz-button nzType="default" (click)="onlineStatusBatch(1)" *ngIf="permission.userPermission.has('goods:goodsAll:putaway')">批量上架</button>
    <button nz-button nzType="primary" nzDanger (click)="onlineStatusBatch(2)" *ngIf="permission.userPermission.has('goods:goodsAll:soldOut')">批量下架</button>
    <!-- <button nz-button nzType="primary" (click)="showModel(0)">批量添加水印</button>
    <button nz-button nzType="primary" (click)="showModel(1)">批量去除水印</button> -->
  </div>

  <!-- Table -->
  <div class="pagination-wrap-position">
    <div class="table-wrap p-t-10">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1100px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableLoading"
        [nzData]="listOfData?.records"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="listOfData?.total"
        [nzPageIndex]="listOfData?.current"
        [nzPageSize]="listOfData?.size"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="60px" nzLeft [(nzChecked)]="checked" (nzCheckedChange)="onAllChecked($event)"></th>
            <th nzAlign="center" nzWidth="80px" nzLeft>ID</th>
            <th nzAlign="center" nzWidth="100px">状态</th>
            <th nzAlign="center" nzWidth="350px">商品</th>
            <!-- <th nzAlign="center" nzWidth="100px">B端水印</th> -->
            <!-- <th nzAlign="center" nzWidth="100px">C端水印</th> -->
            <th nzAlign="center" nzWidth="120px" (click)="onTableFilter('1')">
              <div class="table-sort">
                <span>B端价格</span>
                <span class="table-sorter">
                  <span class="table-sort-inner">
                    <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 1 && queryForm.asc}"></i>
                    <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 1 && !queryForm.asc}"></i>
                  </span>
                </span>
              </div>
            </th>
            <th nzAlign="center" nzWidth="120px" (click)="onTableFilter('2')">
              <div class="table-sort">
                <span>C端价格</span>
                <span class="table-sorter">
                  <span class="table-sort-inner">
                    <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 2 && queryForm.asc}"></i>
                    <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 2 && !queryForm.asc}"></i>
                  </span>
                </span>
              </div>
            </th>
            <th nzAlign="center" nzWidth="150px">京东价格</th>
            <th nzAlign="center" nzWidth="120px" (click)="onTableFilter('3')">
              <div class="table-sort">
                <span>销量</span>
                <span class="table-sorter">
                  <span class="table-sort-inner">
                    <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 3 && queryForm.asc}"></i>
                    <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 3 && !queryForm.asc}"></i>
                  </span>
                </span>
              </div>
            </th>
            <th nzAlign="center" nzWidth="120px" (click)="onTableFilter('4')">
              <div class="table-sort">
                <span>销售库存</span>
                <span class="table-sorter">
                  <span class="table-sort-inner">
                    <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 4 && queryForm.asc}"></i>
                    <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 4 && !queryForm.asc}"></i>
                  </span>
                </span>
              </div>
            </th>
            <th nzAlign="center" nzWidth="120px" (click)="onTableFilter('5')">
              <div class="table-sort">
                <span>冻结库存</span>
                <span class="table-sorter">
                  <span class="table-sort-inner">
                    <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 5 && queryForm.asc}"></i>
                    <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 5 && !queryForm.asc}"></i>
                  </span>
                </span>
              </div>
            </th>
            <th nzAlign="center" nzWidth="140px">关联组</th>
            <th nzAlign="center" nzWidth="120px">货主</th>
            <th nzAlign="center" nzWidth="120px">品牌</th>
            <th nzAlign="center" nzWidth="120px" (click)="onTableFilter('6')">
              <div class="table-sort">
                <span>分类</span>
                <span class="table-sorter">
                  <span class="table-sort-inner">
                    <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 6 && queryForm.asc}"></i>
                    <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.orderField == 6 && !queryForm.asc}"></i>
                  </span>
                </span>
              </div>
            </th>
            <th nzAlign="center" nzWidth="150px">创建时间</th>
            <th nzAlign="center" nzWidth="300px" nzRight>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td nzAlign="center" nzLeft [nzChecked]="data.Checked" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
            <!-- id -->
            <td nzAlign="center" nzLeft>{{ data.id }}</td>
            <!-- 状态 -->
            <td nzAlign="center" class="{{ data.status == 0 ? 'font0'  : data.status == 1 ? 'font1'  : 'font2' }}">
              {{ data.status == 0 ? '无效' : data.status == 1 ? '已上架' : '已下架' }}
            </td>
            <!-- 商品 -->
            <td nzAlign="center" table-name>
              <div class="goods-name">
                <img nz-image width="42px" height="42px" [nzSrc]="data.icon || fallback" />
                <div class="goods-text">
                  <span [title]="data.name">{{ data.name }}</span>
                  <!-- <p>{{data.code}}</p> -->
                </div>
              </div>
            </td>
            <!-- B端水印 -->
            <!-- <td nzAlign="center">
              <img nz-image width="42px" height="42px" [nzSrc]="data.iconB" [nzFallback]="fallback" alt="" />
            </td> -->
            <!-- C端水印 -->
            <!-- <td nzAlign="center">
              <img nz-image width="42px" height="42px" [nzSrc]="data.iconC" [nzFallback]="fallback" alt="" />
            </td> -->
            <!-- B端价格 -->
            <td nzAlign="center">￥{{ data.shopPriceB }}</td>
            <!-- C端价格 -->
            <td nzAlign="center">￥{{ data.shopPriceC }}</td>
            <!-- 京东价格 -->
            <td nzAlign="center">
              <button
                nz-button
                nzType="text"
                class="price-abtn"
                [disabled]="!data.jdId"
                (click)="jumpjdPage(data.jdId)">
                ￥ {{ data.jdPrice }}
                （<span [ngStyle]="{'color': data | productListStatus: 'color'}">{{ data | productListStatus: 'price' }}</span>）
              </button>
            </td>
            <!-- 销量 -->
            <td nzAlign="center">{{ data.salesVolume }}</td>
            <!-- 销售库存 -->
            <td nzAlign="center">{{ data.stockNum }}</td>
            <!-- 冻结库存 -->
            <td nzAlign="center">{{ data.frozenStockNum }}</td>
            <!-- 关联组 -->
            <td nzAlign="center">{{ data.skuGroupName ? data.skuGroupName : '-' }}</td>
            <!-- 货主 -->
            <td nzAlign="center">{{ data.supName || '-' }}</td>
            <!-- 品牌 -->
            <td nzAlign="center">{{ data.brandName || '-' }}</td>
            <!-- 类型 -->
            <td nzAlign="center">{{ data.typeName || '-' }}</td>
            <!-- 创建时间 -->
            <td nzAlign="center">{{ data.createTime || '-' }}</td>
            <td nzAlign="center" nzRight class="table-btns">
              <a
                *ngIf="permission.userPermission.has('goods:goodsAll:edit') && [1, 2].includes(data.status)"
                nz-button
                nzType="link"
                (click)="toEdit(data.id)">
                编辑
              </a>
              <a
                *ngIf="permission.userPermission.has('goods:goodsAll:copy')"
                nz-button
                nzType="link"
                nz-popconfirm
                nzPopconfirmTitle="确认复制该商品吗?"
                (nzOnConfirm)="copyGoods(data.id)"
                nzPopconfirmPlacement="top">
                复制
              </a>
              <a
                *ngIf="permission.userPermission.has('goods:goodsAll:preview')"
                nz-button
                nzType="link"
                href="https://parts.i5.cn/index.html#/parts/goodsDetail?i5debugger=true&id={{ data.id }}"
                target="_blank">
                预览
              </a>
              <a
                *ngIf="permission.userPermission.has('goods:goodsAll:putaway') && data.status == 2"
                nz-button
                nzType="link"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确认要上架吗?"
                (nzOnConfirm)="clickSwitch(data.id,1)"
                class="{{ data.status == 2 ? 'font1' : '' }}">
                上架
              </a>
              <a
                *ngIf="permission.userPermission.has('goods:goodsAll:soldOut') && data.status == 1"
                nz-button
                nzType="link"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确认要下架吗?"
                (nzOnConfirm)="clickSwitch(data.id,2)"
                class="{{ data.status == 1 ? 'font2' : '' }}">
                下架
              </a>
              <a
                *ngIf="permission.userPermission.has('goods:goodsAll:delete') && [1, 2].includes(data.status)"
                nz-button
                nzType="link"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确认删除吗?"
                [nzIcon]="iconTpl"
                (nzOnConfirm)="confirm(data)">
                删除
              </a>
              <ng-template #iconTpl>
                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
              </ng-template>
            </td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
  </div>
</nz-card>

<!-- 批量添加水印 START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [(nzVisible)]="isModelVisible"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()"
>
  <ng-template #modalContent>
    <div class="custom-model-body">
      <div *ngIf="modelType == 1; else elseModelBlock" class="remove-text">※  确定要去除 {{ checkedIds.length }} 个商品的水印图片?</div>

      <ng-template #elseModelBlock>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>请选择水印图片:</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-upload
              class="upload-img-box"
              nzAccept="image/*"
              nzAction=""
              nzListType="picture-card"
              (nzChange)="onModalPreview($event)"
              [nzShowUploadList]="false">
              <ng-container *ngIf="!modelForemParams.imgUrl">
                <i class="upload-icon" nz-icon [nzType]="uploadImgLoading ? 'loading' : 'plus'"></i>
              </ng-container>
              <img *ngIf="modelForemParams.imgUrl" [src]="modelForemParams.imgUrl" style="width: 100%" />
            </nz-upload>
          </nz-form-control>
        </nz-form-item>
      </ng-template>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>请选择身份:</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-checkbox-group
            [(ngModel)]="identityOptions"
            (ngModelChange)="changeCheckbox(identityOptions)">
          </nz-checkbox-group>
        </nz-form-control>
      </nz-form-item>
      
      <nz-form-item *ngIf="modelType == 0">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>水印位置:</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-radio-group class="radio-check" nzSize="small" [(ngModel)]="modelForemParams.position" nzButtonStyle="solid">
            <label
              *ngFor="let item of positionOptions"
              nz-radio-button
              [nzValue]="item.value">
              {{ item.label }}
            </label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" [nzLoading]="isConfirmLoading" (click)="handleOk()">确定</button>
      </div>
    </div>
  </ng-template>
</nz-modal>
<!-- 批量添加水印 END -->
